<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="author" content="wangbo">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3d旋转</title>
  <!-- 内部样式 -->
  <style>
    body {
      transform-style: preserve-3d;
      perspective: 300px;
    }

    img {

      transition: all 2s linear;
    }

    /* 都是图片中心点上的线 */
    img:hover {
      /* 正方向旋转的时候头向内,身子外 */
      /* transform: rotateX(45deg); */
      /* 正方向旋转额时候 右向内,左向外 */
      /* transform: rotateY(45deg); */
      /* z轴 相当于在屏幕上进行旋转,顺时针转的 */
      /* 左手定责,左手的拇指,指向箭头的方向,4指弯曲,就是旋转的方向 */
      transform: rotateY(45deg);

    }
  </style>
</head>

<body>
  <img src="./tudou.jpg" alt="">
</body>

</html>